<template>
	<view class="container">
		<uni-section title="" sub-title="" type="square" class="image">
			<image src="../../static/head_icon.png" mode="widthFix"></image>
		</uni-section>
		<view class="info-section">
			<view class="info-item">
				<text class="info-label">学生名称：</text>
				<text class="info-value">{{data.name}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">email：</text>
				<text class="info-value">{{data.email}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">联系电话：</text>
				<text class="info-value">{{data.telephone}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">学院：</text>
				<text class="info-value">{{data.department}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">专业：</text>
				<text class="info-value">{{data.major}}</text>
			</view>
		</view>
		<button type="primary" @click="showPopup">评论</button>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="comment-container">
				<view class="comment-header">
					<text>全部评论（{{total}}）</text>
					<image src="../../static/收起.png" mode="" @click="hidePopup"></image>
				</view>

				<scroll-view class="comment-body" refresher-enabled="true" show-scrollbar="false"
					@refresherrefresh="onRefresh" :refresher-triggered="triggered" @scrolltolower="loadMore">
					<uni-list>
						<uni-list-item v-for="item,index in comments" :key="index" :title="item.title"
							:note="item.content" :rightText="item.date"></uni-list-item>
					</uni-list>
					<uni-load-more :status="status" class="comment-body-item"></uni-load-more>
				</scroll-view>

				<view class="comment-bottom">
					<uni-easyinput class="uni-mt-5" suffixIcon="paperplane-filled" v-model="comment.content"
						placeholder="发表一下您的看法..." @iconClick="up"></uni-easyinput>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: -1,
				data: {},
				comments: [],
				comment: {
					content: '',
				},
				triggered: false,
				currentPage: 1,
				pageSize: 5,
				total: '',
				status: "loading",
				loading: false
			}
		},
		methods: {
			showPopup() {
				this.$refs.popup.open();
				this.getComments()
			},
			hidePopup() {
				this.$refs.popup.close();
			},

			up() {
				uni.request({
					url: 'http://localhost:8090/freshmenapp/message/addone',
					method: 'POST',
					data: {
						title: this.comment.content,
						content: this.comment.content
					},
					success: res => {
						this.getComments()
						this.comment.content = ''
					},
					fail: () => {},
					complete: () => {}
				});
			},

			getComments() {
				return new Promise((resolve) => {
					uni.request({
						url: 'http://localhost:8090/freshmenapp/message/page',
						method: 'GET',
						params: {
							page: this.currentPage,
							size: this.pageSize
						},
						success: res => {
							if (this.comments.length === 0) {
								this.comments = res.data.pageBean.rows
							} else {
								this.comments = [...this.comments, ...res.data.pageBean.rows]
							}
							this.total = res.data.pageBean.total
						},
						fail: () => {
							this.loading = false;
							this.status = 'noMore';
							resolve();
						},
						complete: () => {}
					});
				})
			},

			onRefresh() {
				this.triggered = true;
				setTimeout(() => {
					this.currentPage = 1;
					this.comments = [];
					this.getComments();
					this.triggered = false;
				}, 2000);
			},

			loadMore() {
				if (this.loading) return;
				this.loading = true;
				this.currentPage++;
				this.getComments().then(() => {
					this.loading = false;
					this.status = this.comments.length >= this.total ? 'noMore' : 'more';
				});
			},
		},

		onLoad(e) {
			let id = e.id
			uni.request({
				url: 'http://localhost:8090/freshmenapp/classmate/findone',
				method: 'POST',
				data: {
					id,
				},
				success: res => {
					this.data = res.data.data
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
</script>

<style>
	.container {
		height: 100%;
		padding: 10px;
		font-size: 14px;
		line-height: 24px;
	}

	.info-section {
		background-color: #FFFFFF;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 5px;
	}

	.info-label {
		font-weight: bold;
	}

	.info-value {
		margin-left: 5px;
		color: #666666;
	}

	::-webkit-scrollbar {
		width: 0px;
	}

	button {
		position: absolute;
		width: 80%;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}

	.comment-container {
		height: 350px;
		overflow: auto;
		padding: 0 15px 0 15px;
		background-color: #ffffff;
		position: relative;
		will-change: scroll-position;
		border-radius: 10px 10px 0 0
	}

	.comment-header {
		position: sticky;
		top: 0;
		padding-top: 10px;
		background-color: #FFFFFF;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
	}

	.comment-header text {
		font-size: 18px;
	}

	.comment-header image {
		height: 18px;
		width: 18px;
	}

	.comment-bottom {
		position: sticky;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 10px 0 10px 0;
	}
</style>